<template>
	<view class="recharge-page">
		<!-- 顶部导航栏 -->
		<view class="header">
			<x-status-bar></x-status-bar>
			<view class="flex-center-between header-navbar">
				<x-back-btn></x-back-btn>
				<view class="u-f-40 common-title">{{ lang_personal[type] }}</view>
				<view @click="jumpUrl(`/pages/user/personal/balance/withdrawal/list`)">{{ lang_personal.withdrawalRecord }}</view>
			</view>
		</view>
		
		<!-- 提现到 -->
		<view class="recharge-header flex-center-between u-f-26 u-lh-40">
			<view>{{ lang_personal.withdrawalTo }}</view>
			<view
			class="flex-center-between font-medio"
			style="width: 400rpx;"
			@click="changeAccountAction"
			>
				<view>{{ paypalAccount || lang_personal.paypalAccountTips }}</view>
				<u-icon name="right" custom-prefix="u" color="#333" size="24"></u-icon>
			</view>
		</view>
		
		<!-- 充值金额 -->
		<view class="recharge-container u-f-24 u-lh-34">
			<view class="">{{ lang_personal.withdrawalAmount }}</view>
			
			<view class="flex-baseline font-bold">
				<view class="u-m-r-24 u-f-32 u-lh-38 ">{{ lang_unit.money }}</view>
				<input
				 :placeholder="lang_personal.withdrawalAmountTips"
				 class="u-f-68 u-lh-74"
				 v-model="rechargeValue"
				 type="number"
				 @input="inputAction"
				 />
			</view>
			
			<!-- 分割线 -->
			<u-gap height="1" bgColor="#eeeeee"></u-gap>
			
			<view class="flex-center u-m-t-48 ">
				<view class="flex-center u-m-r-30">
					<view>{{ lang_personal.hasAmountTips }}</view>
					<view class="u-m-l-10 u-m-r-10 font-medio">{{ lang_unit.money }}{{ balance }}</view>
				</view>
				
				<view
				class="font-medio"
				style="color: #FD1E43;"
				@click="rechargeAll"
				>{{ lang_personal.withdrawalAll }}</view>
			</view>
		</view>
	
		<!-- 提交充值 -->
		<view
		class="flex-center-center"
		style="margin-top: 330rpx;">
			<x-common-btn
			background="#FD1E43"
			:disabled="!authSubmit"
			@click="rechargeAction"
			>
				<view>{{ lang_common.done }}</view>
			</x-common-btn>
		</view>
		
		<x-popup
		v-model="visible"
		mode="center"
		zIndex="999999"
		>
			<view
			style="padding: 38rpx 48rpx;width: 670rpx;height: 620rpx; border-radius: 22rpx;background-color: #FFFFFF;">
				<view class="head-container u-text-center">
					<view class="u-m-b-44" style="position: relative;">
						<view class="u-f-36 u-lh-50 font-medio">{{ lang_personal.withdrawalAccount }}</view>
						<view style="position: absolute;top: 10rpx; right: 0;;" @click="visible = false">
							<image src="@/static/image/common/close_grew.png" style="width: 30rpx; height: 28rpx;"></image>
						</view>
					</view>
					
					<view style="margin: 0 auto;width: 330rpx; height: 80rpx;">
						<image src="@/static/image/personal/paypal@2x.png" class="auto-img"></image>
					</view>
					
					<view class="u-m-t-56" style="padding: 22rpx 18rpx;height: 88rpx; background-color: #F9F9F9;border-radius: 6rpx;">
						<input v-model="paypalValue" :placeholder="lang_personal.emailTips" style="width: 100%;height: 32rpx;"/>
					</view>
					
					<view class="flex-center-center u-m-t-64">
						<x-common-btn
						width="432"
						height="88"
						:disabled="!paypalValue"
						@click="updateInfo()">
							<view>{{ lang_common.done }}</view>
						</x-common-btn>
					</view>
				</view>
			</view>
		</x-popup>
	</view>
</template>

<script>
	import { userUpdateUserPaypal, userUserPaypal, withdrawalWithdrawal } from '@/api/user/withdrawal.js'
	export default {
		data() {
			return {
				type: 'withdrawal',
				visible: false,
				
				rechargeValue: '',
				paypalAccount: '',
				paypalValue: '',
				
				isClick: false,
			}
		},
		computed: {
			authSubmit() {
				if (!this.paypalAccount || !this.rechargeValue) return false;
				return true
			}
		},
		onLoad({ type }) {
			this.initInfo()
		},
		methods: {
			// 提交表单
			rechargeAction() {
				if (!this.paypalAccount) {
					return this.$api.msg(this.lang_personal.paypalAccountTips)
				}
				this.rechargeValue = Number(this.rechargeValue) > this.balance ? this.balance : this.rechargeValue
				
				if (this.isClick) return;
				this.isClick = true
				withdrawalWithdrawal({ money: this.rechargeValue }).then((data) => {
					this.$store.dispatch('initUserData')
					let timer = setTimeout(() => {
						this.isClick = false
						this.jumpUrl(`/pages/user/personal/balance/withdrawal/list`)
					}, 1000)
				}).catch(() => { this.isClick = false })
			},
			// 输入框变化后
			inputAction() {
				this.$nextTick(() => {
					if (Number(this.rechargeValue) > this.balance) {
						this.$set(this, 'rechargeValue', String(this.balance))
					}
				})
			},
			// 提现全部
			rechargeAll() {
				this.rechargeValue = this.balance
			},
			// 点击账号触发
			changeAccountAction() {
				this.visible = true
				this.paypalValue = this.paypalAccount
			},
			// 更新paypal账号
			updateInfo() {
				userUpdateUserPaypal({ paypalAccount: this.paypalValue }).then((data) => {
					this.paypalAccount = this.paypalValue
					this.visible = false
				})
			},
			// 获取paypal信息
			initInfo() {
				userUserPaypal({}).then((data) => {
					this.paypalAccount = data || ''
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.recharge-page /deep/ .u-drawer-bottom,
	.recharge-page /deep/ .u-mode-center-box {
		background: transparent
	}
	.header {
		background-color: #f9f9f9;
	}
	
	.recharge {
		&-header {
			padding: 32rpx 54rpx 58rpx 44rpx;
			background-color: #f9f9f9;
		}
		
		&-container {
			padding: calc(46rpx) 52rpx 0;
			transform: translateY(-15rpx);
			border-top-left-radius: 30rpx;
			border-top-right-radius: 30rpx;
			background-color: #FFFFFF;
		}
	}
	.recharge-page /deep/ .u-drawer-center {
		background: transparent!important
	}
	uni-page-body /deep/ .u-drawer-center {
		background: transparent
	}
	.account {
		&-container {
			border-top-left-radius: 16rpx;
			border-top-right-radius: 16rpx;
			background-color: #FFFFFF;
		}
	}
	.pay-item {
		padding: 30rpx 40rpx;
		border-bottom: 1rpx solid #f9f9f9;
	}
</style>
